/**
 * 头部导航栏动画与交互逻辑
 */
class HeaderAnimation {
    constructor(options = {}) {
        this.options = {
            soundEnabled: true,
            hoverSoundUrl: 'https://assets.mixkit.co/sfx/preview/mixkit-casino-slot-machine-win-1046.mp3',
            ...options
        };
        
        this.initSounds();
        this.initElements();
        this.bindEvents();
    }
    
    // 初始化音效
    initSounds() {
        if (!this.options.soundEnabled) return;
        
        this.hoverSound = new Audio(this.options.hoverSoundUrl);
        this.hoverSound.volume = 0.2;
    }
    
    // 初始化元素
    initElements() {
        this.header = document.querySelector('.el-header');
        this.dropdownBox = document.querySelector('.el-dropdown__box');
        this.dropdownItems = document.querySelectorAll('.el-dropdown-item');
        this.welcomeText = document.querySelector('.el-header strong');
    }
    
    // 绑定事件
    bindEvents() {
        if (this.dropdownBox) {
            this.dropdownBox.addEventListener('mouseenter', () => this.playHoverSound());
        }
        
        if (this.dropdownItems) {
            this.dropdownItems.forEach(item => {
                item.addEventListener('mouseenter', () => {
                    this.playHoverSound();
                    this.addItemHoverEffect(item);
                });
            });
        }
        
        if (this.welcomeText) {
            this.welcomeText.addEventListener('mouseenter', () => {
                this.addWelcomeTextEffect();
            });
        }
        
        // 添加窗口滚动效果
        window.addEventListener('scroll', () => this.handleScroll());
    }
    
    // 播放悬停音效
    playHoverSound() {
        if (!this.options.soundEnabled || !this.hoverSound) return;
        
        this.hoverSound.currentTime = 0;
        this.hoverSound.play().catch(err => console.log('Audio play error:', err));
    }
    
    // 添加菜单项悬停效果
    addItemHoverEffect(element) {
        element.style.transform = 'translateX(3px)';
        element.style.backgroundColor = 'rgba(255, 208, 75, 0.1)';
        
        // 重置效果
        element.addEventListener('mouseleave', function reset() {
            element.style.transform = '';
            element.style.backgroundColor = '';
            element.removeEventListener('mouseleave', reset);
        });
    }
    
    // 添加欢迎文本效果 - 增强版
    addWelcomeTextEffect() {
        if (!this.welcomeText) return;
        
        // 保存原始样式
        const originalFontSize = this.welcomeText.style.fontSize;
        const originalFontWeight = this.welcomeText.style.fontWeight;
        
        // 应用增强效果
        this.welcomeText.style.color = '#ffd04b';
        this.welcomeText.style.textShadow = '0 0 10px rgba(255, 208, 75, 0.7)';
        this.welcomeText.style.fontSize = '1.2em';
        this.welcomeText.style.fontWeight = 'bolder';
        this.welcomeText.style.transform = 'scale(1.05)';
        this.welcomeText.style.transition = 'all 0.3s ease';
        
        // 重置效果
        setTimeout(() => {
            this.welcomeText.style.color = '';
            this.welcomeText.style.textShadow = '';
            this.welcomeText.style.fontSize = originalFontSize;
            this.welcomeText.style.fontWeight = originalFontWeight;
            this.welcomeText.style.transform = '';
        }, 500);
    }
    
    // 处理滚动效果
    handleScroll() {
        if (!this.header) return;
        
        if (window.scrollY > 10) {
            this.header.style.boxShadow = '0 4px 12px 0 rgba(0, 0, 0, 0.1)';
            this.header.style.backgroundColor = 'rgba(255, 255, 255, 0.98)';
        } else {
            this.header.style.boxShadow = '0 2px 12px 0 rgba(0, 0, 0, 0.08)';
            this.header.style.backgroundColor = 'rgba(255, 255, 255, 1)';
        }
    }
    
    // 添加工具提示
    addTooltips() {
        const elementsWithTooltip = document.querySelectorAll('[data-tooltip]');
        elementsWithTooltip.forEach(el => {
            el.classList.add('tooltip');
        });
    }
}

// 初始化头部动画
window.addEventListener('DOMContentLoaded', () => {
    const headerAnimation = new HeaderAnimation({
        soundEnabled: true
    });
    
    headerAnimation.addTooltips();
});    